<template>
	<view class="">
		<view class="bg-white  p-20 fs-15">
			<view class="pt-10 pb-15  flex under-line">
				<view class="w-80">收货人</view>
				<input class="fs-14" v-model='form.name' placeholder="填写收货人信息" />
			</view>
			<view class="pt-10 pb-15   flex under-line">
				<view class="w-80">联系方式</view>
				<input class="fs-14" maxlength="11" v-model='form.mobile' placeholder="填写收货人联系方式" />
			</view>
			<view class="pt-10 pb-15   flex under-line">
				<view class="w-80">所在地区</view>
				<picker mode="region" @change="change">
					{{address}}
				</picker>
			</view>
			<view class="pt-10 pb-15   flex box-sizing">
				<view class="w-80 ">详细地址</view>
				<textarea v-model='form.detail' class="ml-12 mt-3 fs-14" style="height:100rpx;" placeholder="选填写详细地址" />
			</view>
			<view class="text-right text-blue-1 fs-13" @click="wxAddress()">
				使用系统地址
			</view>
		</view>
		<view class="bg-white  p-20 fs-15 mt-20">
			<view class="pt-10 pb-15 flex">
				<view class="w-p-80">
					<view class='fs-18 mb-3'>设置默认地址</view>
					<view class="fs-13 text-grey-3">下单时会默认使用该地址</view>
				</view>

				<switch color="#007aff" :checked="form.is_default=='1'" @change="switchChange" />
			</view>
		</view>


		<view class="p-20">
			<view class="btn-blue py-10 rounded-20 text-white text-center" @click="submit">确认</view>
			<view class="bg-white border-blue-1 py-10 rounded-20  text-blue-1 text-center mt-10" @click="del"
				v-if='form.id!=0'>删除</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { $http, $page } from '@/utils/index'
	import { onLoad } from '@dcloudio/uni-app'
	const form = ref({
		id: 0,
		name: '',
		mobile: '',
		province: '',
		city: '',
		area: '',
		detail: '',
		is_default: '2'
	})
	const list = ref()
	const address = ref('选择地址')
	onLoad((option : any) => {
		getAddress()
		if (option.id) {
			getDetail(option.id)
		}
	})
	const getDetail = (id : number) => {
		$http.get('Address/getDetail', { id: id }).then((res : any) => {
			form.value = res.data
			address.value = form.value.province + '-' + form.value.city + form.value.area
		})
	}
	const switchChange = (e : any) => {
		if (e.detail.value) {
			form.value.is_default = '1'
		} else {
			form.value.is_default = '2'
		}
	}
	//提交
	const submit = () => {
		$http.post('Address/address', form.value).then((res : any) => {
			uni.showToast({
				title: '操作成功'
			})
			setTimeout(() => {
				$page.back()
			}, 500)
		})
	}

	const change = (e : any) => {

		form.value.province = e.detail.value[0]
		form.value.city = e.detail.value[1]
		form.value.area = e.detail.value[2]
		address.value = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2]
	}

	//获取地址
	const getAddress = () => {
		$http.get('Address/getAddress').then(res => {
			list.value = res.data
		})
	}

	const wxAddress = () => {
		
		uni.chooseAddress({
			success(res : any) {
				form.value.province = res.provinceName
				form.value.city = res.cityName
				form.value.area = res.countyName
				form.value.name = res.userName
				form.value.mobile = res.telNumber
				form.value.detail = res.detailInfo
				address.value = res.provinceName + '-' + res.cityName + '-' + res.countyName
			},
			fail(err) {
				console.log(err)
			}
		})
	}

	const del = () => {
		uni.showModal({
			title: '温馨提示',
			content: '确认删除该地址?',
			success(res) {
				if (res.confirm == true) {
					$http.post('Address/delAddress', { id: form.value.id }).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						setTimeout(() => {
							$page.back()
						}, 500)
					})
				}
			}
		})
	}
</script>

<style>
</style>